<template>
	<view class="container">
		<!-- 分类区域 -->
		<scroll-view scroll-x enable-flex class="category">
			<view class="category-item" :class="{ active: isAllActive }" @click="selectCategory()">
				全部
			</view>
			<view class="category-item" :class="{ active: item.isActive }" v-for="item in categoryNameData"
				:key="item.category_id" @click="selectCategory(item.category_id)">
				{{item.category_name}}
			</view>
		</scroll-view>
		<!-- 文章列表区域 -->
		<view class="article-list">
			<view class="list-item" v-for="item in articleListData" :key="item.article_id"
				@click="goDetail(item.article_id)">
				<view class="item-cover">
					<view class="cover">
						<image :src="baseUrl + item.cover" class="image" />
					</view>
				</view>
				<view class="item-text">
					<view class="title">{{ item.title }}</view>
					<view class="intro">{{ item.intro }}</view>
				</view>
			</view>
			<view class="none" v-if="!articleListData.length">
				暂无文章
			</view>
		</view>
		
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import request from '../../utils/request.js'

	const categoryNameData = ref([]) // 分类名称
	const articleListData = ref([]) // 文章列表
	const baseUrl = 'http://127.0.0.1:5000/' // 图片路径
	const isAllActive = ref(true) // 全部的选中

	onLoad(() => {
		getCategoryNameData()
		getArticleListDataByCate()
	})

	// 获取分类名称数据
	const getCategoryNameData = async () => {
		let result = await request.get('/categoryName')
		let newResult = result.map(item => ({
			...item,
			isActive: false
		}))
		categoryNameData.value = newResult
	}

	// 获取文章列表数据
	const getArticleListDataByCate = async (category_id) => {
		let result = await request.get('/articleListByCate', {
			params: category_id ? { category_id } : {}
		})
		articleListData.value = result
	}

	// 选择分类
	const selectCategory = (category_id) => {
		let isAll = !category_id
		categoryNameData.value = categoryNameData.value.map(item => ({
			...item,
			isActive: !isAll && (item.category_id === category_id)
		}))
		isAllActive.value = isAll
		getArticleListDataByCate(category_id)
	}

	// 跳转详情
	const goDetail = (article_id) => {
		uni.navigateTo({
			url: `/pages/detail/detail?article_id=${article_id}`
		})
	}
</script>

<style>
	page {
		background-color: skyblue;
	}

	.category {
		margin: 10px;
		height: 50px;
		width: 95%;
		background-color: white;
		display: flex;
	}

	.category-item {
		background-color: #f1f1f1;
		height: 40px;
		width: 100px;
		margin: 5px 10px;
		display: flex;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
	}

	.active {
		background-color: slateblue;
		color: white;
	}

	.list-item {
		display: flex;
		justify-content: space-between;
		height: 100px;
		background-color: #ffffff;
		margin: 10px;
		border-radius: 5px;
		padding: 10px;
	}

	.item-cover {
		height: 100%;
		width: 100px;
		border-radius: 5px;
	}

	.cover {
		height: 100px;
		width: 100px;
		border-radius: 5px;
	}

	.image {
		border-radius: 5px;
		height: 100px;
		width: 100px;
	}

	.item-text {
		width: 240px;
		border-radius: 5px;
		display: flex;
		flex-direction: column;
	}

	.title {
		margin: 7px;
		font-size: 20px;
	}

	.intro {
		margin: 0 7px;
		height: 50px;
	}
	
	.none {
		font-size: 40px;
		margin: 20px 110px;
		color: #fff;
	}
</style>